<!-- 店铺数据界面，选择月份与周期遮罩层 -->
<template>
	<view class="date-select-mask">
		<u-mask :show="show" @click="show = false" :zoom="false">
			<view class="warp">
				<view class="head" @tap.stop>
					<text v-if="type == 0">选择日期</text>
					<text v-if="type == 1">选择年份</text>
					<view  @click.stop="close">
						<u-icon class="close-icon" name="close" color="#000000" size="36"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="content-top">
						<view class="year">
							<text v-if="type == 0">2021年07月</text>
							<text v-if="type == 1">2021年</text>
						</view>
						<view class="year-btn">
							<view class="arrow-left" @click.stop="add">
								<u-icon name="arrow-left" color="#000000" size="36"></u-icon>
							</view>
							<view class="arrow-right" @click.stop="less">
								<u-icon name="arrow-right" color="#000000" size="36"></u-icon>
							</view>
						</view>
					</view>
					<view class="content-bottom">
						<view class="item" :class="{'item-check' : itemChecked == index}" v-for="(item,index) in 5" @click.stop="check(index)">
							<view class="week" v-if="type == 0">
								<text>第一周</text>
								<text class="week-date">7.19~7.25</text>
							</view>
							<view class="month" v-if="type == 1">
								<text>1月</text>
							</view>
							<view class="money">
								<text>￥1</text>
							</view>
						</view>
					</view>
				</view>
				<view class="foot">
					<view class="foot-btn" @click.stop="close"><text>确定</text></view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,  //是否显示遮罩层
				// select: 0,   //选择什么，0为week，1为year
				itemChecked:0
			}
		},
		props:{
			type:{                  //选择类型，0为周，1为月
				type:Number,
				default:0
			}
		},
		methods:{
			add(){
				console.log('add');
			},
			less(){
				console.log('less');
			},
			close(){
				console.log('11');
			},
			check(e){
				this.itemChecked = e
			}
		}
	}
</script>

<style scoped lang="scss">
	.date-select-mask{
		position: relative;
		.warp {
			position: absolute;
			bottom: 0;
			width:100%;
			height:900rpx;
			background-color: #fff;
			.head{
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 16px;
				font-weight: 700;
				border-bottom: 1px solid #ebebeb;
				.close-icon{
					position: absolute;
					right: 30rpx;
					top: 30rpx;
				}
			}
			.content{
				.content-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx;
					font-size: 16px;
					font-weight: 700;
					.year-btn{
						display: flex;
						.arrow-left{
							margin-right: 60rpx;
						}
					}
				}
				.content-bottom{
					display: flex;
					flex-wrap: wrap;
					width: 320px;
					margin: 30rpx auto;
					.item{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						margin-bottom: 30rpx;
						width: 160rpx;
						height: 120rpx;
						text-align: center;
						background-color: #fff;
						font-size: 15px;
						color: #000;
						.week-date{
							font-size: 11px;
							color: #9e9e9e;
						}
						.money{
							font-size: 13px;
							color: #9e9e9e;
						}
					}
					.item-check{
						color: #fff;
						background-color: #2ba4f7;
						.week-date,
						.money{
							color: #fff;
						}
					}
				}
			}
			.foot{
				position: absolute;
				bottom: 30rpx;
				width: 100%;
				.foot-btn{
					margin: auto;
					width: 80%;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					color: #fff;
					font-size: 16px;
					border-radius: 38rpx;
					background-color: #2ba4f7;
				}
			}
		}
	}
	
</style>